<template>
  <el-card class="box-card">
    <div>
      <el-empty class="emt"
        v-if="!response || Object.keys(response).length === 0" 
        description="Enter the URL and click send to get a response" 
      />
      
      <div v-else>
        <span class="iconfont icon-http custom-icon">Response</span>
        <el-tabs type="border-card" class="tab">
          <el-tab-pane label="Body">
            <pre v-html="highlightedResponse"></pre>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-card>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; 

export default {
  computed: {
    response() {
      return this.$store.getters.getResponse; 
    },
    formattedResponse() {
      return JSON.stringify(this.response, null, 2); 
    },
    highlightedResponse() {
      // 使用 highlight.js 对格式化后的 JSON 进行高亮显示
      return hljs.highlightAuto(this.formattedResponse).value;
    },
  },
};
</script>

<style scoped>
.custom-icon {
  margin-left: 15px;
  font-size: 24px; /* 调整图标大小 */
  margin-bottom: 16px; /* 与下面的内容增加间距 */
  color: #008000; /* 可选：设置图标颜色 */
}
.box-card {
  width: 1155px;  
  height: 340px; 
  overflow: auto; 
}

.tab {
  width: 1100px;  
  height: 260px; 
  overflow: auto; 
}

/* 自定义高亮样式 */
pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  overflow-x: auto;
}
</style>
